<template>
  <div class="file-upload-example">
    <div class="example-section">
      <h3 class="section-title">基础文件上传</h3>
      <p class="section-description">最简单的文件上传，支持单文件上传</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <FileUpload
            v-model="basicFile"
            button-text="选择文件"
            @success="handleSuccess"
            @error="handleError"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ basicFile || '未选择文件' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">图片上传</h3>
      <p class="section-description">限制文件类型为图片，并设置文件大小限制</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <FileUpload
            v-model="imageFile"
            button-text="选择图片"
            accept=".jpg,.jpeg,.png,.gif"
            :allowed-types="['.jpg', '.jpeg', '.png', '.gif']"
            :max-size="5"
            @success="handleSuccess"
            @error="handleError"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ imageFile || '未选择图片' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">多文件上传</h3>
      <p class="section-description">支持同时上传多个文件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <FileUpload
            v-model="multipleFiles"
            button-text="选择多个文件"
            :multiple="true"
            :max-count="3"
            @success="handleSuccess"
            @error="handleError"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">
            <div v-if="Array.isArray(multipleFiles) && multipleFiles.length > 0" class="file-list">
              <div v-for="(file, index) in multipleFiles" :key="index" class="file-item">
                <file-outlined />
                <span>{{ index + 1 }}. {{ file }}</span>
              </div>
            </div>
            <span v-else class="empty-text">未选择文件</span>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">文档上传</h3>
      <p class="section-description">上传 PDF、Word、Excel 等文档文件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <FileUpload
            v-model="documentFile"
            button-text="选择文档"
            accept=".pdf,.doc,.docx,.xls,.xlsx"
            :allowed-types="['.pdf', '.doc', '.docx', '.xls', '.xlsx']"
            :max-size="10"
            @success="handleSuccess"
            @error="handleError"
          />
        </div>
        <div class="result-display">
          <div class="result-label">当前值：</div>
          <div class="result-value">{{ documentFile || '未选择文档' }}</div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">禁用状态</h3>
      <p class="section-description">禁用文件上传功能</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <FileUpload
            v-model="disabledFile"
            button-text="已禁用"
            :disabled="true"
          />
        </div>
        <div class="result-display">
          <div class="result-label">状态：</div>
          <div class="result-value">
            <a-tag color="default">已禁用</a-tag>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">文件上传组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础用法">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;FileUpload
    v-model="basicFile"
    button-text="选择文件"
    @success="handleSuccess"
    @error="handleError"
  /&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'
import FileUpload from '@/components/FileUpload.vue'

const basicFile = ref('')

const handleSuccess = (response, file) =&gt; {
  console.log('上传成功:', response, file)
}

const handleError = (error, file) =&gt; {
  console.error('上传失败:', error, file)
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="图片上传">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;FileUpload
    v-model="imageFile"
    button-text="选择图片"
    accept=".jpg,.jpeg,.png,.gif"
    :allowed-types="['.jpg', '.jpeg', '.png', '.gif']"
    :max-size="5"
    @success="handleSuccess"
    @error="handleError"
  /&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="3" header="多文件上传">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;FileUpload
    v-model="multipleFiles"
    button-text="选择多个文件"
    :multiple="true"
    :max-count="3"
    @success="handleSuccess"
    @error="handleError"
  /&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { FileOutlined } from '@ant-design/icons-vue'
import FileUpload from '../../../components/FileUpload.vue'

// 各种示例的文件路径
const basicFile = ref<string>('')
const imageFile = ref<string>('')
const multipleFiles = ref<string[]>([])
const documentFile = ref<string>('')
const disabledFile = ref<string>('')

// 成功回调
const handleSuccess = (response: any, file: File) => {
  console.log('上传成功:', response, file)
  message.success(`文件 ${file.name} 上传成功`)
}

// 错误回调
const handleError = (error: any, file: File) => {
  console.error('上传失败:', error, file)
  message.error(`文件 ${file.name} 上传失败`)
}
</script>

<style scoped>
.file-upload-example {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 20px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.result-display {
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 80px;
}

.result-value {
  flex: 1;
  font-size: 14px;
  color: #595959;
  word-break: break-all;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 13px;
}

.file-item .anticon {
  color: #1890ff;
  font-size: 14px;
}

.empty-text {
  color: #bfbfbf;
  font-style: italic;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 16px;
  }

  .result-display {
    flex-direction: column;
    gap: 8px;
  }

  .result-label {
    min-width: auto;
  }
}
</style>